<template>
  <div class="brand_header">
    <div class="tittle">
      <van-icon name="arrow-left" class="icon" @click="re" />
      <span v-if="brands"> {{ brands.topPageName }} </span>
    </div>
    <div class="nav">
      <van-tabs
        title-active-color="white"
        title-inactive-color="white"
        color="white"
        line-width=".2rem"
        @click="skip"
      >
        <van-tab v-if="brands" :title="brands.navName">
          <div class="layout">
            <div class="choiceness">
              <div class="top_info">
                <h3>口碑品牌</h3>
                <span class="text-center yahei">口碑品牌买送好礼</span>
              </div>
              <van-list
                v-model:loading="state.loading"
                :finished="state.finished"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <div v-for="i in brands_body?.brandDTOS" :key="i.jumpType">
                  <div class="list1">
                    <ul>
                      <li class="one_list">
                        <div class="list1_brand_title">
                          <div class="logo">
                            <img :src="i.brandLogo" />
                          </div>
                          <h4>
                            {{ i.brandName }}
                            <span class="bubble"
                              ><span> {{ i.label }} </span></span
                            >
                          </h4>
                          <div id="timer_20328" class="timer">仅剩：1天</div>
                        </div>
                        <div
                          class="list1_brand_info"
                          :style="{
                            backgroundImage: 'url(' + i.backgroundImg + ')',
                          }"
                        >
                          <div class="info">
                            <h4 class="title text-ellipsis">
                              {{ i.longProfit }}
                            </h4>
                            <p class="msg">
                              <i style="font-style: normal">
                                {{ i.brandLabelOne.val }}
                              </i>
                            </p>
                            <span class="out"
                              >已售<span class="yahei">
                                {{ (i.recentSale / 10000).toFixed(2) }} 万</span
                              >件 <van-icon name="arrow"
                            /></span>
                          </div>
                          <div class="focus text-center">
                            {{ (i.fansNum / 10000).toFixed(2) }}人关注
                          </div>
                        </div>
                        <div class="list1_brand_product" v-if="brands_body">
                          <van-swipe
                            class="my-swipe"
                            :autoplay="3000"
                            :width="110"
                            indicator-color="white"
                            loop
                          >
                            <van-swipe-item
                              v-for="item in i.hotPush"
                              :key="item.sort"
                            >
                              <div class="brand_hot_product">
                                <div class="cent">
                                  <div class="img ui-act-label">
                                    <div class="imgArea">
                                      <img :src="item.pic" />
                                      <div class="imgTag">9.9折</div>
                                    </div>
                                  </div>
                                  <div class="textArea">
                                    <div class="price">
                                      <div class="priceTag">¥</div>
                                      <div class="currentPrice">
                                        {{ item.yuanjia }}
                                      </div>
                                      <div class="prePrice">
                                        ￥{{ item.yuanjia }}
                                      </div>
                                    </div>
                                    <div class="tag">
                                      <div
                                        class="merchantTag"
                                        v-if="item.labelTwo"
                                      >
                                        {{ item.labelTwo }}
                                      </div>
                                    </div>
                                    <div class="pra_out">
                                      {{ item.xiaoliangText }}
                                    </div>
                                    <div class="sell_dear">
                                      {{ item.sellDear }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </van-swipe-item>
                          </van-swipe>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </van-list>
            </div>
          </div>
        </van-tab>
        <div v-if="!brands2" class="load">页面加载中</div>
        <div v-else>
          <van-tab v-for="item in brands2" :title="item.title" :key="item.id">
            <div class="layout brand">
              <div v-if="!brands_body2" class="load">页面加载中</div>
              <div class="list2" v-else>
                <van-list
                  v-model:loading="state.loading"
                  :finished="state.finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                >
                  <li v-for="j in brands_body2" :key="j.sort">
                    <lazy-component>
                      <div class="list2_brand_info">
                        <div class="a">
                          <div class="logo">
                            <img
                              ui-lazyload=""
                              :src="j.brandLogo"
                              :data-original="j.brandLogo"
                              alt=""
                              isload="true"
                              style="
                                background: rgb(245, 245, 245);
                                display: block;
                              "
                            />
                          </div>
                          <div class="info">
                            <h4 class="title text-ellipsis">
                              {{ j.brandName }}
                            </h4>
                            <p class="msg">
                              <span
                                >单品低至<span class="yahei">
                                  {{ j.discount }} </span
                                >折</span
                              ><span
                                >领券最高立减<span class="yahei">
                                  {{ j.maxQuanJia }}
                                </span></span
                              >
                            </p>
                            <span class="out"
                              >已售<span class="yahei"
                                >{{
                                  (j.recentSale / 10000).toFixed(1)
                                }}
                                万</span
                              >件<i class="iconfont icon-youjiantou"></i
                            ></span>
                          </div>
                        </div>
                      </div>
                      <div class="list2_brand_product row-s">
                        <ul>
                          <li
                            class="col-12-4"
                            v-for="e in j.hotPush"
                            :key="e.id"
                          >
                            <div class="label label1" v-if="e.goodsLabelOne">
                              {{ e.goodsLabelOne.val }}
                            </div>
                            <div class="brand_hot_product">
                              <div class="cent">
                                <div class="img ui-act-label">
                                  <div class="imgArea">
                                    <img
                                      ui-lazyload=""
                                      :src="e.pic"
                                      :data-original="e.pic"
                                      isload="true"
                                      style="
                                        background: rgb(245, 245, 245);
                                        display: inline;
                                      "
                                    />
                                    <div class="imgTag">
                                      {{ e.discount }} 折
                                    </div>
                                  </div>
                                </div>
                                <div class="textArea">
                                  <div class="price">
                                    <div class="priceTag">¥</div>
                                    <div class="currentPrice">
                                      {{ e.jiage }}
                                    </div>
                                    <div class="prePrice">
                                      ￥{{ e.yuanjia }}
                                    </div>
                                  </div>
                                  <div class="tag">
                                    <img
                                      v-if="e.goodsLabels.val"
                                      class="jiaobiao"
                                      src="//cmsstatic.ffquan.cn//wap_new/brand/images/ju.png"
                                    />
                                  </div>
                                </div>
                              </div>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </lazy-component>
                  </li>
                </van-list>
              </div>
            </div>
          </van-tab>
        </div>
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import router from "@/router";
import { computed, defineComponent, onMounted, reactive, toRefs } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const state = reactive({
      list: [],
      loading: false,
      finished: false,
    });
    const re = () => {
      router.go(-1);
    };
    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        // 加载状态结束
        state.loading = false;

        // 数据全部加载完成
        if (state.list.length >= 40) {
          state.finished = true;
        }
      }, 1000);
    };

    const skip = async (name: number) => {
      if (name > 0) {
        const n = store.state.brand_2.brands.data[name - 1].typeId;
        await store.dispatch({
          type: "brand_skip/getBrand",
          params: {
            val: n,
          },
        });
        console.log(brands_body2);
      }
    };
    const store = useStore();
    onMounted(() => {
      store.dispatch({
        type: "brand/getBrand",
      });
      store.dispatch({
        type: "brand_2/getBrand",
      });
      store.dispatch({
        type: "brand_body/getBrand",
      });
    });
    const brands = computed(() => store.state.brand.brands.data);
    const brands2 = computed(() => store.state.brand_2.brands.data);
    const brands_body = computed(() => store.state.brand_body.brands.data);
    const brands_body2 = computed(() => store.state.brand_skip.brands.data);

    return {
      brands,
      brands2,
      brands_body,
      skip,
      brands_body2,
      state,
      onLoad,
      re,
    };
  },
});
</script>
<style lang="stylus" scoped>
dd, dl, dt, h1, h2, h3, h4, h5, h6, input, li, ol, p, textarea, ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.nav{
  overflow: auto;
  height:8rem;
}
.load {
  text-align: center;
  font-size :.18rem
}

body, button, dd, dl, dt, h1, h2, h3, h4, h5, h6, html, input, li, ol, p, select, textarea, ul {
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}

.brand_hot_product {
  position: relative;
  padding: 0 0.05rem;

  .cent {
    position: relative;

    .ui-act-label {
      position: relative;
      z-index: 1;
      zoom: 1;

      .imgArea {
        position: relative;
        overflow: hidden;
        border-radius: 6px;

        img {
          width: 100%;
          background: #fff !important;
        }

        .imgTag {
          width: 31px;
          height: 14px;
          background: linear-gradient(153deg, #fad961 0, #f76b1c 100%);
          border-radius: 7px 7px 7px 0;
          font-size: 10px;
          font-weight: 400;
          color: #fff;
          text-align: center;
          position: absolute;
          bottom: 3px;
          right: 3px;
        }
      }
    }

    .textArea {
      padding: 6px 0 0 4px;

      .price {
        margin-bottom: 4px;
        display: flex;
        align-items: baseline;

        .priceTag {
          font-size: 14px;
          font-weight: 400;
          color: #ff3b32;
          line-height: 14px;
          margin-right: 2.5px;
        }

        .currentPrice {
          font-size: 16px;
          font-weight: 500;
          color: #ff3b32;
          line-height: 17px;
          margin-right: 9px;
        }

        .prePrice {
          font-size: 11px;
          font-weight: 400;
          color: #aaa;
          line-height: 12px;
          text-decoration: line-through;
        }
      }

      .tag {
        display: flex;
        overflow: hidden;
        min-height: 13px;

        .merchantTag {
          box-sizing: border-box;
          border-radius: 3px;
          opacity: 0.7;
          border: 1px solid #fe3a33;
          font-family: PingFangSC;
          color: #fe3a33;
          word-break: keep-all;
          display: inline-block;
          text-align: center;
          height: 13px;
          line-height: 13px;
          margin-right: 5px;
          padding: 0 5px;
          font-size: 10px;
          font-weight: 400;
        }
      }
    }
  }

  .sell_dear {
    height: 15px;
    background: rgba(245, 166, 35, 0.2);
    border-radius: 3px;
    padding: 0 6px;
    font-size: 11px;
    color: #F57523;
    overflow: hidden;
    font-family: PingFangSC;
    font-weight: 400;
    line-height: 15px;
    display: inline-block;
    margin-top: 5px;
  }
}

.pra_out {
  height: 14px;
  font-size: 10px;
  font-weight: 400;
  color: #666;
  line-height: 14px;
  margin-top: 4px;
}

.brand_header {
  background: url('https://img.alicdn.com/imgextra/i3/2053469401/O1CN01p3C4Lj2JJhz3YaJEa_!!2053469401.png');
  width: 100%;
  position: fixed;
  z-index: 99;
  height: 0.9rem;
  background-size: 100%;

  .tittle {
    line-height: 0.35rem;
    font-weight: 400;
    font-size: 0.18rem;
    padding: 0.05rem 0.1rem;
    color: #fff;
    overflow: hidden;
    text-align: center;

    .icon {
      position: absolute;
      zoom: 1;
      left: 0.1rem;
      font-size: 0.18rem;
      z-index: 99;
      font-weight: 500;
      line-height: 0.35rem;
    }
  }

  /deep/.van-tabs__nav {
    background-color: rgba(0, 0, 0, 0);
  }
}

.layout {
  background: url('https://img.alicdn.com/imgextra/i3/2053469401/O1CN01p3C4Lj2JJhz3YaJEa_!!2053469401.png') no-repeat 0 -0.9rem;
  max-width: 750px;
  text-align: left;
  margin: auto;
  overflow: hidden;
  background-size: 100% auto;

  .top_info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 13px;

    h3 {
      height: 27px;
      font-size: 20px;
      color: #fff;
      line-height: 27px;
      margin-bottom: 2px;
      margin-top: 10px;
      font-family: AliHYAiHei;
    }

    span {
      height: 12px;
      font-size: 12px;
      display: block;
      font-weight: 400;
      color: #fff;
      line-height: 12px;
      text-align: center;
    }
  }
}

.list1 {
  margin: 0 0.1rem;

  ul {
    li {
      background: #fff;
      border-radius: 10px;
      margin-bottom: 10px;
      padding-bottom: 5px;

      .list1_brand_title {
        padding: 0 10px;
        height: 55px;
        display: flex;
        align-items: center;

        .logo {
          width: 40px;
          height: 40px;
          border-radius: 5px;
          margin-right: 8px;
          overflow: hidden;
          display: flex;
          align-items: center;
          background: #fff;

          img {
            width: 100%;
          }
        }

        h4 {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          line-height: 22px;
          font-family: PingFangSC-Medium;

          .bubble {
            padding: 0 3px 0 8px;
            height: 17px;
            font-size: 10px;
            font-weight: 400;
            line-height: 16px;
            position: relative;
            z-index: 1;
            zoom: 1;
            left: 3px;
            top: -2px;
            background-size: 21px 100%;
            text-align: center;
            display: inline-block;
          }
        }

        .timer {
          float: right;
          height: 20px;
          position: absolute;
          right: 20px;
          font-size: 10px;
          font-weight: 400;
          color: #333;
          line-height: 20px;
        }
      }
    }
  }

  .list1_brand_info {
    height: 100px;
    border-radius: 10px;
    padding: 10px 16px 18px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    zoom: 1;
    background-size: 100%;
    margin: 0 10px;
    background-color: #B9D3F0;

    .info {
      color: #fff;
      font-family: PingFangSC;

      .title {
        height: 27px;
        font-size: 16px;
        font-weight: 500;
        line-height: 27px;
        margin-bottom: 0.14rem;
        width: 100%;
      }

      .msg {
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        height: 12px;
        margin-bottom: 0.14rem;
      }

      .out {
        height: 12px;
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        line-height: 12px;
        display: block;

        i {
          font-size: 8px;
          margin-left: 5px;
        }
      }
    }

    .focus {
      font-size: 10px;
      font-weight: 400;
      color: #fff;
      line-height: 19px;
      position: absolute;
      z-index: 1;
      zoom: 1;
      right: 0;
      bottom: 0;
      height: 19px;
      background: linear-gradient(276deg, #ff1e2f 0, #e51698 100%);
      border-radius: 10px 10px 10px 0;
      padding: 0 8px;
    }
  }

  .list1_brand_product {
    min-height: 150px;
    background: #fff;
    border-radius: 0 0 10px 10px;
    position: relative;
    z-index: 1;
    zoom: 1;
    overflow: hidden;
    padding: 10px 10px 5px;
    box-sizing: border-box;
  }
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.list2 {
  margin: 5px 10px;

  li {
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .list2_brand_info {
    .a {
      padding: 17px 11px 19px;
      background: #Fff;
      display: flex;
      position: relative;
      border-radius: 10px 10px 0 0;
    }

    .logo {
      width: 50px;
      height: 50px;
      box-shadow: 0 3px 8px -2px rgba(94, 107, 121, 0.2);
      border-radius: 2px;
      margin-right: 9px;
      display: flex;
      align-items: center;

      img {
        width: 100%;
        background: #fff !important;
      }
    }

    .info {
      color: #333;
      font-family: PingFangSC;

      .title {
        height: 27px;
        font-size: 16px;
        font-weight: 500;
        line-height: 27px;
        margin-bottom: 3px;
        max-width: 135px;
      }

      .msg {
        font-size: 12px;
        font-weight: 400;
        color: #F44;
        line-height: 12px;
        height: 12px;
        margin-bottom: 8px;
      }
    }

    .out {
      font-size: 12px;
      font-weight: 400;
      color: #9B9B9B;
      line-height: 12px;
      display: inline;
      position: absolute;
      z-index: 1;
      zoom: 1;
      right: 11px;
      top: 24px;
    }
  }

  .list2_brand_product {
    background: #fff;
    border-radius: 0 0 10px 10px;
    padding: 0 10px;

    li {
      position: relative;
      z-index: 1;
      zoom: 1;
      display: inline-block;
    }

    .label1 {
      background: linear-gradient(57deg, #e440f9 0, #c51ef1 100%);
    }

    .label {
      height: 15px;
      border-radius: 8px;
      padding: 0 5px;
      font-size: 10px;
      font-weight: 400;
      color: #fff;
      line-height: 15px;
      position: absolute;
      zoom: 1;
      right: 3px;
      top: 3px;
      z-index: 99;
    }
  }
}

.row-s:after, .row-s:before {
  overflow: hidden;
  height: 0;
  clear: both;
  display: block;
}

.row-s .col-12-4 {
  width: 33.33333333%;
}

.jiaobiao {
  width: 18px;
  height: 13px;
  margin-right: 4px;
}
</style>
